<template>
	<div class="container details-container">
		<div class="details-content">
			<van-sticky>
				<van-nav-bar
				  title="物林"
				  left-text="返回"
				  left-arrow
				  @click-left="onClickLeft"
				/>
			</van-sticky>
		</div>
		<!-- 轮播图 -->
		<details-swipe :goods-thumb="goodsThumb"></details-swipe>
		
		<!-- 商品详情与价格 -->
		<div class="goods-details f-row">
			<div>
				<p v-cloak>{{goods.goods_name}}</p>
				<p v-cloak>{{goods.goods_desc}}</p>
			</div>
			<div class="flex-1">
				<van-icon color="red" @click="likeStar" :name="star" />
				<p>{{starNum}}</p>
			</div>
		</div>
		<div class="price">￥{{goods.price}}</div>
		
		<!-- 确保担保 -->
		<div class="ensure">
			<span><van-icon name="gold-coin-o" color="#216EF0" />&nbsp;免运费</span>
			<span><van-icon name="passed" color="#216EF0" />&nbsp;正品授权</span>
			<p><van-icon name="clock-o" color="#216EF0" />&nbsp;现货商品3个工作日发货</p>
		</div>
		
		<!-- 商品结算导航 -->
		<van-goods-action>
		  <van-goods-action-icon @click="Myservice" icon="chat-o" text="客服" color="#07c160" />
		  <van-goods-action-icon to="/cart" icon="cart-o" text="购物车" />
		  <van-goods-action-icon @click="changeCollect" :icon="collectIcon" :text="collectStar" color="#ff5000" />
		  <van-goods-action-button to="/cart" type="warning" text="加入购物车" />
		  <van-goods-action-button to="/cart" type="danger" text="立即购买" />
		</van-goods-action>
		
	</div>
</template>

<script>
	import detailsSwipe from '../components/details-swipe.vue'
	
	export default{
		data(){
			return {
				goods : {},
				//把图片地址拼成一个数组，项有三个一样的
				goodsThumb : [],
				star : 'like-o',
				starNum : 0 ,
				collectStar : '收藏',
				collectIcon : 'star-o',
			}
		},
		methods : {
			onClickLeft(){
				this.$router.go(-1);
			},
			likeStar(){
				this.star = this.star == 'like-o' ? 'like' : 'like-o';
				
				this.starNum = this.star == 'like-o' ? --this.starNum : ++this.starNum;
			},
			Myservice(){
				this.$toast.success('客服上线中，请稍等...');
			},
			changeCollect(){
				this.collectStar = this.collectStar == '收藏' ? '已收藏' : '收藏';
				this.collectIcon = this.collectStar == '收藏' ? 'star-o' : 'star';
			},
			changeGoodsThumb(){
				this.goodsThumb.push(this.goods.goods_thumb);
				this.goodsThumb.push(this.goods.goods_thumb);
				this.goodsThumb.push(this.goods.goods_thumb);
			},
		},
		components:{
			detailsSwipe
		},
		//请求数据
		created() {
			let goodsId = this.$route.query.goods_id;
			
			// 请求数据
			this.axios.get('/api_goods', { params : {goodsId : goodsId },
			}).then((result) => {
				let {data} = result;
				if(data.code != 0){
					console.log(data);
					return;
				};
				
				// 更新数据
				this.goods = data.data[0];
				
				// 调用添加图片方法,得到轮播图
				this.changeGoodsThumb();
			})
			
			
		}
	}
</script>

<style scoped lang="less">
	.details-container{
		position: absolute;
		left: 0px; top:0px;
		width:100%; height: 100%;
		z-index: 2;
	}
	.details-content{
		position: fixed;
		left: 0px; top:0;
		width:100%;
		z-index: 100;
	}
	
	.goods-details{
		padding: 12px;
		color: #666;
		p{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 30px;
		}
		div:first-child{
			padding-right: 70px;
			width:90%;
			box-sizing: border-box;
			p:first-child{
				font-size: 18px;
				padding-right: 40px;
				color: #333;
			}
		}
		div:last-child{
			color: red;
			text-align: center;
			font-size: 20px;
			line-height: 16px;
		}
	}
	
	.price{
		color: #07C160;
		padding: 12px;
		font-size: 24px;
		border-bottom: 1px solid #eee;
	}
	
	.ensure{
		padding: 8px 12px;
		font-size: 13px;
		color: #999;
		line-height: 24px;
		span{margin-right: 10px;}
	}
	
</style>
